<div class="home-container">
    <div class="jumbotron">
        <div class="row">
            <div class="col-12">
                <h1 class="display-3"> {{ 'home.WELCOME' | translate }}!</h1>
                <p class="lead">{{ 'home.DESCRIPTION' | translate }}.</p>
                <hr class="my-4">
                <p>
                    <img src="assets/img/brand/logo.png" class="d-none d-xl-block">
                    <img src="assets/img/brand/logo-min.png" class="d-lg-none">
                </p>
                <p class="lead">
                    <a class="btn btn-primary btn-lg" href="https://github.com/brunohbrito/JP-Project" target="_blank"
                        role="button">Learn
                        more
                    </a>
                </p>
            </div>
        </div>
    </div>
    <!-- Cards -->
    <div class="card-deck mb-3 text-center">
        <!-- Clients -->
        <div class="card mb-4 box-shadow">
            <div class="card-header">
                <h4 class="my-0 font-weight-normal">{{ 'general.clients' | translate }}</h4>
            </div>
            <div class="card-body">
                <h1 class="card-title">
                    <span title="Clients" class="font-size-1" aria-hidden="true">💻</span>
                </h1>
                <a [routerLink]="'/clients'" class="btn btn-lg btn-block btn-primary">{{ 'Manage' | translate }} </a>
            </div>
        </div>
        <!-- Identity Resources -->
        <div class="card mb-4 box-shadow">
            <div class="card-header">
                <h4 class="my-0 font-weight-normal">{{ 'general.identity-resource' | translate }}</h4>
            </div>
            <div class="card-body">
                <h1 class="card-title">
                    <span class="font-size-1" title="Identity Resources" aria-hidden="true">🔖</span>
                </h1>
                <a [routerLink]="'/identity-resource'" class="btn btn-lg btn-block btn-outline-primary">{{ 'Manage' |
                    translate }}</a>
            </div>
        </div>
        <!-- Api Resources -->
        <div class="card mb-4 box-shadow">
            <div class="card-header">
                <h4 class="my-0 font-weight-normal">{{ 'general.api-resource' | translate }}</h4>
            </div>
            <div class="card-body">
                <h1 class="card-title">
                    <span class="font-size-1" title="Api Resources" aria-hidden="true">☁️</span>
                </h1>
                <a [routerLink]="'/api-resource'"
                    class="btn btn-lg btn-block btn-primary">{{ 'Manage' | translate }}</a>
            </div>
        </div>

    </div>
    <div class="card-deck mb-3 text-center">
        <!-- Persisted grants -->
        <div class="card mb-4 box-shadow">
            <div class="card-header">
                <h4 class="my-0 font-weight-normal">{{ 'general.persisted-grants' | translate }}</h4>
            </div>
            <div class="card-body">
                <h1 class="card-title">
                    <span class="font-size-1" title="Api Resources" aria-hidden="true">🔑</span>
                </h1>
                <a [routerLink]="'/persisted-grants'" class="btn btn-lg btn-block btn-outline-primary">{{ 'Manage' |
                    translate }}</a>
            </div>
        </div>
        <!-- Users -->
        <div class="card mb-4 box-shadow">
            <div class="card-header">
                <h4 class="my-0 font-weight-normal">{{ 'general.users' | translate }}</h4>
            </div>
            <div class="card-body">
                <h1 class="card-title">
                    <span class="font-size-1" title="Api Resources" aria-hidden="true">👨‍👩‍👧‍👦</span>
                </h1>
                <a [routerLink]="'/users'" class="btn btn-lg btn-block btn-primary">{{ 'Manage' |
                    translate }}</a>
            </div>
        </div>
        <!-- Roles -->
        <div class="card mb-4 box-shadow">
            <div class="card-header">
                <h4 class="my-0 font-weight-normal">{{ 'general.roles' | translate }}</h4>
            </div>
            <div class="card-body">
                <h1 class="card-title">
                    <span class="font-size-1" title="Api Resources" aria-hidden="true">🔐</span>
                </h1>
                <a [routerLink]="'/roles'" class="btn btn-lg btn-block btn-outline-primary">{{ 'Manage' |
                    translate }}</a>
            </div>
        </div>
    </div>
<!-- 
    <div class="container-fluid">
        <div class="container-fluid mt-2">
            <div class="authenticating-loader" *ngIf="!(isDoneLoading | async)">
                <div>Authenticating...</div>
            </div>
            <hr>
            <p>You can <a routerLink="/url-without-route">go to a url without a route</a> to see the fallback route.</p>
            <hr>
            <p>
                <button class="btn btn-success mr-1" (click)='login()'>login</button>
                <button class="btn btn-primary mr-1" (click)='logout()'>logout</button>
                <button class="btn btn-link mr-1" (click)='logoutExternally()'>logout externally...</button>
            </p>
            <p>
                <button class="btn btn-warning mr-1" (click)='refresh()'>force silent refresh</button>
                <button class="btn btn-secondary mr-1" (click)='reload()'>reload page</button>
                <button class="btn btn-danger mr-1" (click)='clearStorage()'>clear storage</button>
            </p>
            <hr>
            <table class="table table-bordered table-sm table-props">
                <tr>
                    <th>IsAuthenticated</th>
                    <td><code>{{isAuthenticated | async}}</code></td>
                </tr>
                <tr>
                    <th>HasValidToken</th>
                    <td><code>{{hasValidToken}}</code></td>
                </tr>
                <tr>
                    <th>IsDoneLoading</th>
                    <td><code>{{isDoneLoading | async}}</code></td>
                </tr>
                <tr>
                    <th>CanActivateProtectedRoutes</th>
                    <td><code>{{canActivateProtectedRoutes | async}}</code></td>
                </tr>
                <tr>
                    <th>IdentityClaims</th>
                    <td class="pre"><code>{{identityClaims | json}}</code></td>
                </tr>
                <tr>
                    <th>AccessToken</th>
                    <td><code class="break-all">{{accessToken}}</code></td>
                </tr>
                <tr>
                    <th>IdToken</th>
                    <td><code class="break-all">{{idToken}}</code></td>
                </tr>
            </table>
        </div>
    </div> -->
</div>